<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
        <div class="col-md-12">
            <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
                <div class="form-group">
                    <label class="font-noraml">创建时间</label>
                    <div class="input-daterange input-group">
                        <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control" name="dateBegin" />
                        <span class="input-group-addon">到</span>
                        <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control" name="dateEnd" />
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                    <button type="reset" class="btn btn-sm btn-danger">重置</button>
                    @[ if ("1"==scfg._insert){ /]
                    <button @click="edit('a',{@[ for(t in pks){ /]${tLP.index==1?'':','}${t.columnNameFormat}:0@[ } /]});" v-if='staff.hasPermission("${tableNameL}:add")' class="btn btn-sm btn-success"> 新增</button>
                    @[ } /]
                </div>
            </form>
            <div class="table-responsive table-scrollable m-t">
                <table class="table table-bordered table-striped  table-hover">
                    <thead>
                        <tr>
                            <th style="width:20px;">#</th>
                            @[ for(t in scfg._col_show){ /]
                            <th>${t.value}</th>
                            @[ } /]
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
                            <td>{{(result.data.pageIndex-1)*result.data.pageSize + index+1}}</td>
                            @[ for(t in scfg._col_show){ /]
                            <td>{{item.${t.key}${columnMap[t.key]=='Date'?" | date('yyyy-MM-dd HH:mm:ss')":""}}}</td>
                            @[ } /]
                            <td>
                            @[ if ("1"==scfg._detail) { /]
                              <a href="javascript:;" v-show='staff.hasPermission("${tableNameL}:info")'  @click="info('i',item)" class="label label-info" > 详情</a>
                            @[ } /]
                            @[ if("1"==scfg._update){ /]
                              <a href="javascript:;" v-show='staff.hasPermission("${tableNameL}:edit")'  @click="edit('e',item)" class="label label-success" > 编辑</a>
                            @[ } /]
                            @[ if ("1"==scfg._delLogic && null!=scfg._col_del) { /]
                              <a href="javascript:;" v-show='staff.hasPermission("${tableNameL}:del")'   @click="del(item)" class="label label-danger" > 删除</a>
                            @[ }else if ("1"==scfg._del){ /]
                              <a href="javascript:;" v-show='staff.hasPermission("${tableNameL}:phydel")'   @click="phydel(item)" class="label label-danger" > 彻底删除</a>
                            @[ } /]
                            </td>
                        </tr>
                        <tr v-if="result.data.data==null || result.data.data.length==0">
                            <td colspan="${scfg._col_show.~size+2}">
                              <div class="alert"><strong>{{ result | message }}</strong></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="b_page" v-html="tagPages"></div>
        </div>
    </div>
  </div>
</template>
<script type="text/javascript">
    import '@/assets/js/style-vendor.js'

    import $ from '@/assets/js/jquery-vendor.js'
    import axios from 'axios'
    import '@/assets/js/datepicker-vendor.js'
    import {$storage, axiosContentType, site} from '@/assets/js/boss'
    import '@/assets/js/pageTag'

    /* copy to boss.js
    var site={
        ${tableNameL}: { // ${tcfg.tableComment}
             view: basePath + '/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}',
            page: apiPath + '${scfg._web_http}/page/',       // 分页
            @[ if ("1"==scfg._tree) { /]
            tree: apiPath + '${scfg._web_http}/tree',        // 树
            @[ } /]
            save: apiPath + '${scfg._web_http}/save',        // 新增or保存
            info: apiPath + '${scfg._web_http}/info/',       // 详情
            @[ if ("1"==scfg._delLogic && null!=scfg._col_del) { /]
            del: apiPath + '${scfg._web_http}/del/',         // 逻辑删除
            @[ }else if ("1"==scfg._del){ /]
            phydel: apiPath + '${scfg._web_http}/phydel/',   // 物理删除
            @[ } /]
        }
    }
    */
    /* copy to router.js
    {path: '/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}', name: '${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}', component: () => import('@/views/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${tcfg.tableName}')},
    {path: '/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}/edit', name: '${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}Edit', component: () => import('@/views/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${tcfg.tableName}_edit')},
    {path: '/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}/info', name: '${strUtil.toLowerCaseFirstOne(tcfg.tableNameFormat)}Info', component: () => import('@/views/${strUtil.getDir(tcfg.schemaConf._view_pkg)}${tcfg.tableName}_info')}

    */
   export default {
       data() {
         return {
           result: {data: {pageIndex: 1, data: []}, message: ''},
           tagPages: ''
         }
       },
       mounted() {
         let that = window.$vueApp = this;
         document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
         this.staff.init(function () {
           that.page(1);
         });
         $('.input-daterange').datepicker({
           language: 'zh-CN',
           format: 'yyyy-mm-dd',
           keyboardNavigation: !1,
           forceParse: !1,
           autoclose: !0
         });
       },
       watch: {
           // result: function (val) {
           //   this.$nextTick(function () { console.info('变量result渲染完成'); }
           // }
       },
       methods: {
           page(pageIndex) {
               let that = this;
               if (!pageIndex) pageIndex = 1;
               axios.post(site.${tableNameL}.page + pageIndex
                   , $('#info_search_form').serialize()
                   , axiosContentType.xWwwFormUrlencoded
               ).then(function (response) {
                 const result = response.data;
                 if (result.code === 0) {
                   that.result = result;
                   that.tagPages = that.tag.page(result.data);
                 } else {
                   alert(result.message);
                 }
               });
           },
           info(title, item) {
               $storage.setItem(site.${tableNameL}.info, item.id);
               this.lbox.openMyBoxLayer(title, site.${tableNameL}.view + '/info');
           },
           edit(title, item) {
               $storage.setItem(site.${tableNameL}.info, item.id);
               this.lbox.openMyBoxLayer(title, site.${tableNameL}.view + '/edit');
           },
           @[ if ("1"==scfg._delLogic && null!=scfg._col_del) { /]
           del(item) {
               let that = this;
               if (confirm('确认删除吗?')) {
                   axios.post(site.${tableNameL}.del + item.id, {}).then(function (response) {
                       const result = response.data;
                       if (result.code === 0) {
                           that.page(that.result.data.pageIndex);
                           alert('删除成功');
                       } else {
                           alert(result.message);
                       }
                   });
               }
           }
           @[ }else if ("1"==scfg._del){ /]
           phydel(item) {
               let that = this;
               if (confirm('确认删除吗?此操作无法恢复!')) {
                   axios.post( site.${tableNameL}.phydel + item.id, {}).then(function (response) {
                       const result = response.data;
                       if (result.code === 0) {
                           that.page(that.result.data.pageIndex);
                           alert('删除成功');
                       } else {
                          alert(result.message);
                       }
                   });
               }
           }
           @[ } /]
            @[ if ("1"==scfg._tree) { /]
            //-- loadTree
            @[ } /]
       }
    }
</script>
